<template>
	<div class="menubar" v-if="menus" style="padding-top: 20px">
		<el-menu :default-active="active" background-color="#121b2d" text-color="#c0c4cc" active-text-color="#68acff" :router="true">
			<el-menu-item :index="item.path" v-if="!item.children" v-for="item in menus" :key="item.id">
				<i class="iconfont" :class="item.icon"></i>
				<span slot="title">{{ item.name }}</span>
			</el-menu-item>
			<el-submenu :index="String(index)" v-if="item.children" v-for="(item, index) in menus" :key="item.id">
				<template slot="title">
					<i class="iconfont" :class="item.icon"></i>
					<span slot="title">{{ item.name }} </span>
				</template>
				<el-menu-item :index="submenu.path" v-for="(submenu, sub_index) in item.children" :key="submenu.id">
					<i class="iconfont" :class="submenu.icon"></i>
					<span slot="title">{{ submenu.name }} </span>
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'

	export default {
		data() {
			return {
				active: 'dashboard'
			}
		},
		computed: {
			...mapGetters([
				'menus'
			]),
			...mapState({
				route: state => state.route
			})
		},
		watch: {
			//获取当前URL
			route () {
				this.active = window.location.hash.substr(8);
			}
		}
	}
</script>

<style lang="scss">
	.el-menu {
		border-right: none;
	}

	.menubar {
		height: 100%;
		width: 200px;
		border-right: none;
		position: fixed;
		top: 51px;
		background-color: #121b2d;
	}

	.left-content {
		height: 100%;
		width: 220px;
		background-color: rgb(84, 92, 100);
	}

	.el-menu-item a {
		color: #FFF;
		&:hover {
			text-decoration: none;
		}
	}

	.icon-shouyeshouye {
		font-size: 22px;
	}
	.iconfont {
		margin-right: 5px;
	}

	.router-link-exact-active, .active {
		color: #ffd04b;
		background-color:rgb(41,49,67)
	}
	.el-menu-item.is-active{
		background-color:rgb(41,47,69) !important;
		border-left: 4px solid #199dff
	}
</style>
